<template>
  <view class="container">
    <nut-swiper :loop="true" :auto-play="3000" :pagination-visible="true" :init-page="0">
      <nut-swiper-item v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item">
          <image class="swiper-img" :src="item.imgUrl" mode="aspectFill" />
          <!-- <view class="swiper-title">{{ item.title }}</view> -->
        </view>
      </nut-swiper-item>
    </nut-swiper>
  </view>
  <!-- 中间的卡片组件 -->
  <view class="card-container">
    <view class="card-grid">
      <view v-for="(card, index) in cardList" :key="index" class="card-item" @click="handleCardClick(card)">
        <view class="card-content">
          <!-- 左侧圆形图标 -->
          <view class="card-icon">

            <!-- <image :src="card.icon" color="#fff" /> -->
            <IconFont :name="card.icons" size="50" color="#fff" />
          </view>

          <!-- 右侧文本区域 -->
          <view class="card-text">
            <text class="card-title">{{ card.title }}</text>
            <text class="card-subtitle">{{ card.subtitle }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 新增底部导航栏 -->
  <view class="tab-bar">
    <view class="tab-item" :class="{ active: activeTab === 'index' }" @click="switchTab('index')">
      <image :src="photoH" class="tab-icon" />
      <text class="tab-text">首页</text>
    </view>
    <view class="tab-item" :class="{ active: activeTab === 'profile' }" @click="switchTab('profile')">
      <image :src="photoP" class="tab-icon" />
      <text class="tab-text">个人中心</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { IconFont } from '@nutui/icons-vue'
import Taro from '@tarojs/taro'
// 轮播图数据
const swiperList = ref([
  {
    imgUrl: require('../../assets/l1.png'),
    title: '消考安'
  },
  {
    imgUrl: require('../../assets/l2.png'),
    title: '消考安'
  },
  {
    imgUrl: require('../../assets/l3.png'),
    title: '消考安'
  }
])
//中间的卡片组件数据
const cardList = ref([
  {
    icon: require('../../assets/书架.png'),
    icons: '../../assets/书架.png',
    title: '章节刷题',
    subtitle: '章节分类刷题'
  },
  {
    icon: require('../../assets/随机.png'),
    icons: '../../assets/随机.png',
    title: '随机刷题',
    subtitle: '随机抽取题目'
  },
  {
    icon: require('../../assets/试卷.png'),
    icons: '../../assets/试卷.png',
    title: '模拟考试',
    subtitle: '模拟考试场景'
  },
  {
    icon: require('../../assets/开灯.png'),
    icons: '../../assets/开灯.png',
    title: '背题模式',
    subtitle: '直接显示答案'
  },
  {
    icon: require('../../assets/错题集.png'),
    icons: '../../assets/错题集.png',
    title: '错题集',
    subtitle: '查看错题分析'
  },
  {
    icon: require('../../assets/收藏.png'),
    icons: '../../assets/收藏.png',
    title: '收藏集',
    subtitle: '查看收藏题目'
  }
])

const isLoggedIn = ref(false)

// Check login status on component mount
onMounted(() => {
  const token = Taro.getStorageSync('token')
  if (token) {
    isLoggedIn.value = true
  }
})

const handleCardClick = (card) => {
  console.log('点击卡片:', card.title)
  // Check if user is logged in
  if (!isLoggedIn.value) {
    Taro.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  // 这里可以添加点击事件处理逻辑
  if (card.title === '章节刷题') {
    wx.navigateTo({
      url: '/pages/chapter/index',
    });
  }else if (card.title === '随机刷题') {
    wx.navigateTo({
      url: '/pages/random/index',
    });
  } else if (card.title === '模拟考试') {
    wx.navigateTo({
      url: '/pages/test/index',
    })
  } else if (card.title === '背题模式') {
    wx.navigateTo({
      url: '/pages/recite/index',
    })
  }else if(card.title === '收藏集'){
    wx.navigateTo({
      url: '/pages/collection/index',
    })
  }else if(card.title === '错题集'){
      wx.navigateTo({
      url: '/pages/worng/index',
    })
  }
}

const activeTab = ref('home')

const photoH = ref(require('../../assets/首页绿.png'));
const photoP = ref(require('../../assets/个人中心白.png'));
// 切换选项卡
const switchTab = (tabName) => {
  activeTab.value = tabName;
  if (tabName === 'index') {
    photoH.value = require('../../assets/首页绿.png');
    photoP.value = require('../../assets/个人中心白.png');
  } else if (tabName === 'profile') {
    console.log('点击个人中心');
    photoH.value = require('../../assets/首页白.png');
    photoP.value = require('../../assets/个人中心绿.png');
  }
  // 这里可以添加页面跳转逻辑
  // navigator.push({
  //   url: `/pages/${tabName}/index`,
  // });
  // Taro.navigateTo ({
  //   url: `/pages/${tabName}/index`,
  // });
  wx.redirectTo({
    url: `/pages/${tabName}/index`,
  });
}
</script>

<!-- 轮播样式 -->
<style lang="scss">
.container {
  width: 100%;
  padding: 10px;
  background-color: #faf79b;
}

.swiper-item {
  position: relative;
  width: 100%;
  height: calc(100vw * 0.56);
  border-radius: 8px;
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

// .swiper-title {
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   padding: 10px;
//   color: #fff;
//   background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
// }

//  卡片样式
.card-container {
  height: 700px;
  padding: 15px;
  /* 增加内边距 */
  background-color: #ddf6b8;
}

.card-grid {
  display: grid;
  margin-top: 10%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 80%;
  gap: 10px;
  /* 增加间距 */
  /* 新增阴影效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  /* 配合阴影添加圆角 */
  padding: 20px;
  /* 增加内边距让阴影效果更明显 */
  background-color: #ecfad6;
  /* 添加背景色使阴影更突出 */
}

.card-item {
  background: #c0f9c5;
  border-radius: 20px;
  /* 加大圆角 */
  padding: 22px;
  /* 增加内边距 */
  box-shadow: 0 2px 8px rgba(239, 233, 233, 0.1);
  /* 加强阴影效果 */
  height: 100px;
  /* 固定高度 */
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

// .card-icon {
//   width: 100px; /* 放大图标区域 */
//   height: 100px;
//   background-color: #07c160;
//   border-radius: 50%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   margin-right: 16px; /* 增加间距 */
//   flex-shrink: 0; /* 防止图标被压缩 */
// }
.card-icon {
  width: 100px;
  height: 100px;
  margin-right: 16px;
  /* 增加间距 */
  flex-shrink: 0;
  /* 防止图标被压缩 */
}

.card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 垂直居中 */
}

.card-title {
  font-weight: bold;
  font-size: 38px;
  /* 加大字号 */
  color: #333;
  margin-bottom: 6px;
  /* 增加间距 */
  line-height: 1.2;
}

.card-subtitle {
  font-size: 30px;
  /* 加大字号 */
  color: #666;
  line-height: 1.2;
}


/* 新增底部导航栏样式 */
.tab-bar {
  position: fixed; // 改为固定定位
  bottom: 0; // 固定在底部
  left: 0;
  right: 0;
  z-index: 100; // 确保在最上层

  // position: relative; /* 改为相对定位 */
  display: flex;
  height: 120px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  // margin-top: 20px; /* 与卡片区域间隔 */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 10px 0;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &.active {

    .tab-text,
    nut-icon {
      color: #07c160;
    }
  }

  nut-icon {
    margin-bottom: 8px;
    color: #666;
    font-size: 40px;
  }
}

.tab-text {
  font-size: 28px;
  color: #666;
  font-weight: normal;
}

.tab-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.tab-item.active .tab-icon {
  transform: scale(1.1); // 选中时轻微放大效果
}
</style>